<template>
  <div>
    <img
      v-lazy="imgUrl"
      width="375"
      height="500"
      v-for="imgUrl in arr"
      :key="imgUrl"
      :src="imgUrl"
    />
  </div>
</template>

<script setup lang="ts">
import type { Directive } from "vue";

// 获取所有图片资源
const imageList: Record<string, { default: string }> = import.meta.glob(
  "../../assets/*.jpg",
  {
    eager: true, // 默认为 false 为动态加载，为 true 为静态加载。
  }
);

// 获取所有图片地址
let arr = Object.values(imageList).map((v) => v.default);
// console.log(arr);

// 自定义懒加载指令
const vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
  const def = await import("../../assets/vue.svg");
  el.src = def.default;

  // new IntersectionObserver 获取是否进入可视区
  const observer = new IntersectionObserver((entries) => {
    // console.log(entries[0]);
    // intersectionRatio 如果大于 0 说明进入可视区；为 0 说明不在可视区；0 ~ 1 之间表示进入可视区的百分比。
    if (entries[0].intersectionRatio > 0) {
      setTimeout(() => {
        el.src = binding.value;
        observer.unobserve(el); // 取消监听
      }, 1000);
    }
  });

  observer.observe(el); // 开始监听，传递要监听的元素
};
</script>

<style scoped>
div {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;

  img {
    border-bottom: 2px dashed #eee;
  }
}
</style>
